<template>
  <el-table :data="tableData" border v-bind="$attrs" v-on="$listeners">
    <el-table-column type="index" width="50" align="center" v-if="isIndex" />
    <el-table-column type="selection" width="50" align="center" v-if="isSelect" />
    <template v-for="item in cols">
      <el-table-column
        :key="item.key"
        :label="item.label"
        :prop="item.key"
        :formatter="item.formatter"
        :show-overflow-tooltip="item.showTooltip"
        align="center"
      >
        <template #header>
          {{ item.label }}
        </template>
        <template slot-scope="{ row }">
          <table-render v-if="item.render" :row="row" :renderFun="item.render" />
          <div v-else>
            <span>
              {{ item.formatter ? item.formatter(row) : row[item.key] }}
            </span>
          </div>
        </template>
      </el-table-column>
    </template>
    <slot name="operationCol"></slot>
  </el-table>
</template>

<script>
  import TableRender from './render.vue'
  export default {
    name: 'Table',
    components: { TableRender },
    props: {
      cols: {
        type: Array,
        required: true
      },
      tableData: {
        type: Array,
        required: true
      },
      isIndex: Boolean,
      isSelect: Boolean
    }
  }
</script>
